<template>
  <div>
        <el-form 
            :model="fenzu" 
            ref="dynamicValidateForm" 
            label-width="100px" 
            class="demo-dynamic"
        >
            <el-form-item>
                <el-button @click="addDomain">添加分组</el-button>
            </el-form-item>
            <el-form-item
                v-for="(domain, index) in fenzu.mainFenzu"
                :label="'分组' + index"
                :key="domain.key"
                :prop="'mainFenzu.' + index + '.value'"
                :rules="{
                required: true, message: '域名不能为空', trigger: 'blur'
                }"
            >
                <el-input v-model="domain.value"></el-input>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
                <el-button @click.prevent="addChildren(domain)">添加子分支</el-button>
                <!-- 嵌套子分支 -->
                <div
                    v-for="(item,idx) in domain.children"
                    :key='idx'
                    :label='"子分支" + idx'
                    :prop="'mainFenzu.' + index +'.children'+idx+ '.value'"
                    :rules="{
                    required: true, message: '域名不能为空', trigger: 'blur'
                    }"
                >
                    <el-input v-model="item.value"></el-input>
                    <el-button @click.prevent="removeChildren(item,domain)">删除子分支</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
                <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
            </el-form-item>
        </el-form>
  </div>
</template>

<script>
export default {
    name:'DyanForm',
    props:['cid'],
    data(){
        return{
            fenzu:{
                mainFenzu:[
                    {
                        value:'',
                        key:1,
                        children:[
                            {
                                value:'',
                                key:11
                            }
                        ]
                    }
                ]
            }
        }
    },
    methods:{
        //提交form
        submitForm(formName) {
            let _this=this
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.$api.getInsertItemParam({
                    itemCatId: _this.cid,
                    paramData:JSON.stringify(this.fenzu.mainFenzu)
                }).then(data=>{
                    console.log(data)
                    _this.$message({
                        message:'添加成功',
                        type:'success'
                    })
                    if(data.status==200){
                        _this.$emit('close')
                    }
                })
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        //重置form
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //添加主分支
        addDomain(){
            this.fenzu.mainFenzu.push({
                value: '',
                children:[{
                    value:'',
                    key:(this.fenzu.mainFenzu.length+1) + '1'
                }]
            });
            console.log(this.fenzu)
        },
        //添加子分支
        addChildren(parent){
            console.log(parent)
            parent.children.push({
                value:'',
                key:parent.children.length +1
            })
        },
        //删除主分支
        removeDomain(domain){
            let index = this.fenzu.mainFenzu.indexOf(domain);
            if(index !== -1){
                this.fenzu.mainFenzu.splice(index,1)
            }
        },
        //删除子分支
        removeChildren(item,domain){
            let index =domain.children.indexOf(item);
            if(index !== -1){
                domain.children.splice(index,1)
            }
        }
    }
}
</script>

<style>

</style>